<!--
 @description 核心指标详情
 @fileName CoreDetail.vue
 @author zengqiongying
 @created 2021/05/21 16:18:12
-->
<template>
  <div class="dlg-page">
    <div class="dlg-title">
      {{ detailData.title }}
    </div>
    <div class="dlg-tab">
      <div class="tab-item" :class="{'active':tabIndex===0}" @click="tabIndex=0">今日</div>
      <div class="tab-item" :class="{'active':tabIndex===1}" @click="tabIndex=1">本月</div>
    </div>
    <div class="core-detail-list">
      <template v-if="headerData && headerData.length>0">
        <div class="tr">
          <div v-for="(item,index) in headerData" :key="index" class="th">{{ item }}</div>
          <div class="th">合计</div>
        </div>
        <div class="tr">
          <div v-for="(item,index) in quantityData" :key="index" class="td">{{ item | filterForamtThousand }}</div>
          <div class="td">{{ totalCount | filterForamtThousand }}</div>
        </div>
        <div class="tr">
          <div v-for="(item,index) in rateData" :key="index" class="td">{{ item }}%</div>
          <div class="td">
            <!-- {{ totalCount>0?100:0 }}% -->
            ——
          </div>
        </div>
      </template>
      <div v-if="headerData.length===0" class="no-data">{{ loadOver?'暂无数据':'加载中' }}</div>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getSaleOrderTypeDayMonth } from '@/apis/sale'
import { getDeliveryCenterCareDayMonth, getDeliveryCenterShipDayMonth } from '@/apis/logistics'
import { getFactoryTypeDayMonth } from '@/apis/produces'
export default {
  name: 'CoreDetail',
  props: {
    detailData: {
      type: [String, Object],
      default: ''
    },
    selectDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      tabIndex: 0,
      selectType: '',
      headerData: [], // 表头数据
      monthTotal: 0, // 月总数量
      monthQuantity: [], // 月数量数据
      monthRate: [], // 月占比数据
      loadOver: false, // 是否加载完成
      todayTotal: 0, // 今日总数
      todayQuantity: [], // 今日数量
      todayRate: [] // 今日占比
    }
  },
  computed: {
    totalCount() {
      return this.tabIndex === 1 ? this.monthTotal : this.todayTotal
    },
    quantityData() {
      return this.tabIndex === 1 ? this.monthQuantity : this.todayQuantity
    },
    rateData() {
      return this.tabIndex === 1 ? this.monthRate : this.todayRate
    }
  },
  created() {
    this.selectType = this.detailData.type
    this.loadOver = false
    if (this.selectType === 'order') {
      // this.headerData = ['线下成品', '电商', '定制']
      this.getOrderData()
    } else if (this.selectType === 'care') {
      // this.headerData = ['洋马配送中心', '潜江配送中心', '清风配送中心']
      this.getCarData()
    } else if (this.selectType === 'ship') {
      // this.headerData = ['洋马配送中心', '潜江配送中心', '清风配送中心']
      this.getShipData()
    } else if (this.selectType === 'produces') {
      // this.headerData = ['板式', '板木', '软体', '定制']
      this.getProductData()
    }
  },
  methods: {
    // 销售开单
    getOrderData() {
      getSaleOrderTypeDayMonth(this.selectDate).then(res => {
        if (res.data && res.data.length) {
          this.setTodayData('type', 'dayQuantity', res.data)
          this.setTableData('type', 'monthQuantity', res.data)
        }
        this.loadOver = true
      }).catch(() => {
        this.loadOver = true
      })
    },
    // 订单配车
    getCarData() {
      getDeliveryCenterCareDayMonth(this.selectDate).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            v.deliveryCenter = v.deliveryCenter.replace('配送中心', '')
          })
          this.setTodayData('deliveryCenter', 'careQuantity', res.data)
          this.setTableData('deliveryCenter', 'monthCareQuantity', res.data)
        }
        this.loadOver = true
      }).catch(() => {
        this.loadOver = true
      })
    },
    // 物流启运
    getShipData() {
      getDeliveryCenterShipDayMonth(this.selectDate).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            v.deliveryCenter = v.deliveryCenter.replace('配送中心', '')
          })
          this.setTodayData('deliveryCenter', 'shipQuantity', res.data)
          this.setTableData('deliveryCenter', 'monthShipQuantity', res.data)
        }
        this.loadOver = true
      }).catch(() => {
        this.loadOver = true
      })
    },
    // 生产报工
    getProductData() {
      getFactoryTypeDayMonth(this.selectDate).then(res => {
        if (res.data && res.data.length) {
          this.setTodayData('factoryType', 'completedQuantity', res.data)
          this.setTableData('factoryType', 'monthCompletedQuantity', res.data)
        }
        this.loadOver = true
      }).catch(() => {
        this.loadOver = true
      })
    },
    /**
     * @param {string} titleKey 表头字段名称
     * @param {string} quantityKey 月统计量字段名称
     * @param {Array} data 数据集合
    */
    setTableData(titleKey = 'title', quantityKey = 'quantity', data = []) {
      const headerData = [] // 表头
      const quantityData = [] // 数量数据
      let totalCount = 0 // 总数合计
      data.forEach(item => {
        if (item[titleKey]) {
          headerData.push(item[titleKey])
          const count = Number(Number(item[quantityKey] || 0).toFixed(0)) // 数量
          totalCount += count
          quantityData.push(count)
        }
      })
      totalCount = Number(Number(totalCount).toFixed(0) || 0)
      const rateData = []
      quantityData.forEach(count => {
        let rate = 0
        if (totalCount > 0) {
          rate = count / totalCount * 100
          if (`${rate}`.includes('.')) {
            rate = rate.toFixed(2)
          }
        }
        rateData.push(rate)
      })
      this.monthTotal = totalCount
      this.headerData = headerData
      this.monthQuantity = quantityData
      this.monthRate = rateData
    },

    /**
     * @param {string} titleKey 表头字段名称
     * @param {string} quantityKey 日统计量字段名称
     * @param {Array} data 数据集合
    */
    setTodayData(titleKey = 'title', quantityKey = 'quantity', data = []) {
      const headerData = [] // 表头
      const quantityData = [] // 数量数据
      let totalCount = 0 // 总数合计
      data.forEach(item => {
        if (item[titleKey]) {
          headerData.push(item[titleKey])
          const count = Number(Number(item[quantityKey] || 0).toFixed(0)) // 数量
          totalCount += count
          quantityData.push(count)
        }
      })
      totalCount = Number(Number(totalCount).toFixed(0) || 0)
      const rateData = []
      quantityData.forEach(count => {
        let rate = 0
        if (totalCount > 0) {
          rate = count / totalCount * 100
          if (`${rate}`.includes('.')) {
            rate = rate.toFixed(2)
          }
        }
        rateData.push(rate)
      })
      this.todayTotal = totalCount
      // this.headerData = headerData
      this.todayQuantity = quantityData
      this.todayRate = rateData
    }
  }
}

</script>
<style lang='less' scoped>
  .dlg-title{
    // margin-bottom: 10px;
    padding:10px 0;
    line-height: 22px;
    border-bottom: 1px solid #F4F6F5;
    color: #333;
    font-size: 16px;
    letter-spacing: 1px;
    text-align: center;
    font-family: 'PFZH';
  }
  .dlg-tab{
    width: 100%;
    height: 32px;
    background: #F5F6F7;
    display: flex;
    margin-bottom: 10px;
    .tab-item{
      width: 50%;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      font-family: PFZH;
      color: #888888;
      letter-spacing: 1px;
      text-align: center;
      &.active{
        color: #12B9A3;
        background: #FFFFFF;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
      }
    }
  }
  .core-detail-list{
    padding: 0 5px;
    font-size: 14px;
    text-align: center;
    min-height: 102px;
    .tr{
      min-height: 24px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      color: #333333;
      letter-spacing: 1px;
    }
    .th,.td{
      width: 25%;
      overflow: hidden;
    }
    .th{
      font-family: 'PFZH';
    }
  }
</style>
